<template>
    <div class="page flex-col">
        <div class="section_1 flex-col">
            <div class="block_1 flex-col">
                <img class="image_1" referrerpolicy="no-referrer"
                    src="./assets/img/a0c697b509fb893a79cd90a5662fea73.png" />
                <div class="block_2 flex-col">
                    <div class="section_2 flex-row">
                        <div class="image-wrapper_1 flex-col justify-between">
                            <img class="image_2" referrerpolicy="no-referrer"
                                src="./assets/img/2478b32cf1db2521a00a578f78074469.png" />
                            <img class="image_3" referrerpolicy="no-referrer"
                                src="./assets/img/3060aa597a72943335823eee6c0c58e3.png" />
                        </div>
                        <div class="text-wrapper_1 flex-col justify-between">
                            <span class="text_1">离线</span>
                            <span class="text_2">正常</span>
                        </div>
                    </div>
                    <div class="section_3 flex-row">
                        <img class="image_29" referrerpolicy="no-referrer"
                            src="./assets/img/ec7702df2355a644fdf44b6e12914b07.png" />
                        <span class="text_28">报警</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="device-wrapper">
            <div class="device-list w1">
                <div class="list-d" v-for="(list, idx) in oneData" :key="idx"  @click="setPopup(list)">
                    <span class="list-font">{{ list.Name }}</span>
                    <statusImg :status="list.status" :direction="'h'" />
                </div>
            </div>

            <div class="device-list w2">
                <div class="list-d" v-for="(list, idx) in twoData" :key="idx" @click="setPopup(list)">
                    <span class="list-font">{{ list.Name }}</span>
                    <statusImg :status="list.status" :direction="'h'" />
                </div>
            </div>

            <div class="device-list w3">
                <div class="list-d" v-for="(list, idx) in threeData" :key="idx" @click="setPopup(list)">
                    <span class="list-font">{{ list.Name }}</span>
                    <statusImg :status="list.status" :direction="'h'" />
                </div>
            </div>

            <div class="device-list w4">
                <div class="list-d" v-for="(list, idx) in fourData" :key="idx" @click="setPopup(list)">
                    <span class="list-font">{{ list.Name }}</span>
                    <statusImg :status="list.status" :direction="'l'" />
                </div>
            </div>

            <div class="device-list w5" style="flex-direction: column;">
                <div class="list-d" v-for="(list, idx) in fiveData" :key="idx" style="flex-direction: row;" @click="setPopup(list)">
                    <statusImg :status="list.status" :direction="'l'" />
                    <span class="list-font" style="margin-left: 5px;">{{ list.Name }}</span>
                </div>
            </div>

            <div class="device-list w6" style="flex-direction: column;">
                <div class="list-d" v-for="(list, idx) in sixData" :key="idx"
                    style="flex-direction: row; margin: 4px 0;" @click="setPopup(list)">
                    <statusImg :status="list.status" :direction="'l'" />
                    <span class="list-font" style="margin-left: 5px;">{{ list.Name }}</span>
                </div>
            </div>

            <div class="device-list w7" style="flex-direction: column;">

            </div>
        </div>

        <div class="tbl1">
            <div class="tb-header-line">
                <div class="tb-span">设备编号</div>
                <div class="tb-span">生产数量</div>
                <div class="tb-span-w">设定生产数量</div>
                <div class="tb-span">射嘴温度</div>
                <div class="tb-span-w">射嘴实时温度</div>
                <div class="tb-span-w">射嘴实时油温</div>
                <div class="tb-span">设备状态</div>
            </div>
            <vue-seamless-scroll v-if="leftTableData && leftTableData.length > 0" :data="leftTableData"
                class="seamless-warp" style="width: 100%; height: 377px; overflow: hidden" :class-option="classOption">
                <div class="tb-line" v-for="(item, index) in leftTableData" :key="index">
                    <div class="tb-span">{{ item.Name }}</div>
                    <div class="tb-span">{{ item.ProductionNumber }}</div>
                    <div class="tb-span-w">{{ item.SetProductionNumber }}</div>
                    <div class="tb-span">{{ item.SheZuiTemperature }}</div>
                    <div class="tb-span-w">{{ item.SheZuiRealTemperature }}</div>
                    <div class="tb-span-w">{{ item.OilRealTemperature }}</div>
                    <div class="tb-span"
                        :style="{ color: item.stxt === '报警' ? '#cf2200' : (item.stxt === '离线' ? '' : '#00ce2b') }">{{
                            item.stxt }}</div>
                </div>
            </vue-seamless-scroll>
            <div style="color:#fff;text-align: center;" v-if="!leftTableData || leftTableData.length < 1"> 暂无数据 </div>
        </div>

        <div class="tbl2">
            <div class="tb-header-line">
                <div class="tb-span">设备编号</div>
                <div class="tb-span">生产数量</div>
                <div class="tb-span-w">设定生产数量</div>
                <div class="tb-span">射嘴温度</div>
                <div class="tb-span-w">射嘴实时温度</div>
                <div class="tb-span-w">射嘴实时油温</div>
                <div class="tb-span">设备状态</div>
            </div>
            <vue-seamless-scroll v-if="rightTableData && rightTableData.length > 0" :data="rightTableData"
                class="seamless-warp" style="width: 100%; height: 377px;overflow: hidden;" :class-option="classOption">
                <div class="tb-line" v-for="(item, index) in rightTableData" :key="index">
                    <div class="tb-span">{{ item.Name }}</div>
                    <div class="tb-span">{{ item.ProductionNumber }}</div>
                    <div class="tb-span-w">{{ item.SetProductionNumber }}</div>
                    <div class="tb-span">{{ item.SheZuiTemperature }}</div>
                    <div class="tb-span-w">{{ item.SheZuiRealTemperature }}</div>
                    <div class="tb-span-w">{{ item.OilRealTemperature }}</div>
                    <div class="tb-span"
                        :style="{ color: item.stxt === '报警' ? '#cf2200' : (item.stxt === '离线' ? '' : '#00ce2b') }">{{
                            item.stxt }}</div>
                </div>
            </vue-seamless-scroll>
            <div style="color:#fff;text-align: center;" v-if="!rightTableData || rightTableData.length < 1"> 暂无数据 </div>
        </div>

        <infoParts v-if="infoPopup" :info="deviceInfo" @close="infoPopup = false" />

    </div>
</template>
<script>
import infoParts from './parts/index.vue';
import statusImg from './parts/statusImg.vue';
import { queryDeviceDatas } from '@/api/index'
import { testData } from  "@/const"
export default {
    components: {
        statusImg,
        infoParts
    },
    data() {
        return {
            deviceInfo: {},
            infoPopup: false, // 控制信息弹窗的显示与隐藏
            oneData: [],
            twoData: [],
            threeData: [],
            fourData: [],
            fiveData: [],
            sixData: [],
            timer: null, // Add timer property

            fullDeviceData: [], // Stores all 70 machines
            leftTableData: [], // Data for the left table (tbl1)
            rightTableData: [] // Data for the right table (tbl2)
        }
    },
    computed: {
        classOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快  0.5
                limitMoveNum: 9,//this.repairData.length, // 开始无缝滚动的数据量 this.tableList
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    mounted() {
        this.getInfoData()
        // Start the timer
        this.timer = setInterval(() => {
            this.getInfoData()
        }, 30000) // 30 seconds
    },
    beforeDestroy() {
        // Clear the timer when component is destroyed
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = null
        }
    },
    methods: {
        setPopup(i) {
            console.log(i, '点击设备', this.processedData);
            this.deviceInfo = i
            this.infoPopup = i;
        },
        async getInfoData() {
            console.log('getInfoData')

            let res = await queryDeviceDatas();
            if (res.code !== 200) {
                this.$message.error('获取设备数据失败');
                return;
            }
            this.getDataList(res.data.Datas)
            this.oneData = this.fullDeviceData.slice(0, 23);
            this.twoData = this.fullDeviceData.slice(23, 42);
            this.threeData = this.fullDeviceData.slice(46, 57);
            this.fourData = this.fullDeviceData.slice(57, 59);
            this.fiveData = this.fullDeviceData.slice(42, 46);
            this.sixData = this.fullDeviceData.slice(59, 70);
        },
        getDataList(data) {
            let resultData = [];
            if (data.length > 0) {
                resultData = this.fillMissingMachines(data);
            } else {
                resultData = []; // Ensure resultData is an array even if data is missing
            }
            const sortedAndFormattedData = resultData.map(item => {
                let stxt, status;

                if (!item.Connected) {
                    stxt = '离线';
                    status = 'lx';
                }

                if (item.Connected && !item.IsAlarm) {
                    stxt = '正常';
                    status = 'zc';
                }

                if (item.Connected && item.IsAlarm) {
                    stxt = '报警';
                    status = 'gz';
                }
                return {
                    Name: String(item.Name).padStart(2, '0'),
                    ProductionNumber: item.ChengxingParam?.ProductionNumber || 0,
                    SetProductionNumber: item.ChengxingParam?.SetProductionNumber || 0,
                    SheZuiTemperature: item.ChengxingParam?.SheZuiTemperature || 0,
                    SheZuiRealTemperature: item.StatusParam?.SheZuiRealTemperature || 0,
                    OilRealTemperature: item.StatusParam?.OilRealTemperature || 0,
                    stxt: stxt || '离线',
                    status: status,
                    statusText: item.Status,
                    AlarmContent: item.AlarmContent
                };
            })
            this.fullDeviceData = sortedAndFormattedData; // Store the full list

            this.leftTableData = this.fullDeviceData; // Left table uses the full list
            const offset = 10; // Shift for the right table
            this.rightTableData = this.fullDeviceData.slice(offset).concat(this.fullDeviceData.slice(0, offset));

        },
        fillMissingMachines(originalMachines) {
            const filledData = [];

            // 创建从1到70的所有机器编号
            for (let i = 1; i <= 70; i++) {
                const machineName = i.toString().padStart(2, '0'); // 格式化为两位数
                const originalMachine = originalMachines.find(m => m.Name === machineName);

                if (originalMachine) {
                    // 如果原始数据中存在，直接使用并标记为非填充
                    filledData.push({
                        ...originalMachine,
                        isFilled: false,
                        ChengxingParam: originalMachine.ChengxingParam || {},
                        StatusParam: originalMachine.StatusParam || {}
                    });
                } else {
                    // 如果不存在，创建填充数据
                    filledData.push({
                        Name: machineName,
                        isFilled: true,
                        Connected: false,
                        IsAlarm: false,
                        AlarmContent: null,
                        OperationMode: 0,
                        OperationModeContent: null,
                        Action: 0,
                        ActionContent: "",
                        ChengxingParam: {},
                        StatusParam: {}
                    });
                }
            }

            // 返回处理后的数据
            return filledData
        },
    }
};
</script>
<style scoped lang="scss" src="./assets/index.scss" />
<style lang="scss">
.device-wrapper {
    position: absolute;
    top: 102px;
    left: 238px;
    width: 1510px;
    height: 530px;
    overflow: hidden;
    background-color: #081d38;

    .device-list {
        display: flex;
        flex-direction: row;
        position: absolute;
        background-color: rgba(7, 35, 70, .5);

    }

    .list-font {
        color: #fff;
        font-size: 24px;
        font-family: Impact;
        text-align: center;
    }

    .list-d {
        margin: 0 15px;
        display: flex;
        flex-direction: column;
    }

    .w1 {
        left: 15px;
        top: 0;
        width: 1240px;
        height: 110px;
    }

    .w2 {
        left: 15px;
        top: 135px;
        width: 1040px;
        height: 110px;
    }

    .w3 {
        left: 15px;
        top: 265px;
        width: 615px;
        height: 110px;
    }

    .w7 {
        left: 643px;
        top: 265px;
        width: 612px;
        height: 110px;
        background-color: #042148;
    }

    .w4 {
        left: 15px;
        top: 391px;
        width: 1240px;
        height: 130px;
        display: flex;
        align-items: center;
    }

    .w5 {
        right: 256px;
        top: 135px;
        width: 187px;
        height: 120px;
        padding-left: 47px;
    }

    .w6 {
        right: 60px;
        top: 20px;
        width: 184px;
        height: 505px;
        padding-left: 35px;
        padding-top: 25px;
    }
}

.tbl1 {
    position: absolute;
    left: 78px;
    bottom: 30px;
    width: 860px;
    height: 410px;
    overflow: hidden;
    padding: 0 12px;
    background-color: #03315e;
    padding: 10px;

}

.tbl2 {
    position: absolute;
    right: 78px;
    bottom: 30px;
    width: 860px;
    height: 410px;
    overflow: hidden;
    padding: 0 12px;
    background-color: #03315e;
    padding: 10px;
}

.tb-line {
    display: flex;
    flex-direction: row;
    background-color: #003665;
    margin-bottom: 5px;
    justify-content: space-between;
    height: 30px;
    align-items: center;

    .tb-span {
        width: 107px;
        color: #fff;
        font-size: 18px;
        text-align: center;
    }

    .tb-span-w {
        width: 142px;
        color: #fff;
        font-size: 18px;
        text-align: center;
    }

}
</style>
